<!-- 2017-12-7 14:56:03 | 修改 木遥（微信:  http://marsgis.cn/weixin.html ） -->
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="x5-fullscreen" content="true" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <!-- 标题及搜索关键字 -->
    <meta name="keywords" content="火星科技,cesium,3D,GIS,marsgis,三维,地球,地图,开发,框架,系统,示例,资料,模型,离线,外包,合肥,安徽,中国" />
    <meta
      name="description"
      content="火星科技 合肥火星 合肥火星科技 合肥火星科技有限公司 leaflet leaflet框架 leaflet开发 cesium cesium开发 cesium框架 三维 地球 模型  gis marsgis 地图离线 地图开发 地图框架 地图外包 框架 开发 外包  地图离线 二维地图 三维地图 全景漫游 地理信息系统 云GIS 三维GIS GIS平台 WebGIS"
    />

    <link rel="shortcut icon" type="image/x-icon" href="http://mars3d.cn/favicon.ico" />
    <title>飞行路线 | Mars3D | 三维地图 | 火星科技 | 合肥火星科技有限公司</title>

    <script
      type="text/javascript"
      src="../lib/include-lib.js"
      libpath="../lib/"
      include="jquery,font-awesome,bootstrap,bootstrap-checkbox,jquery.range,layer,haoutil,turf,mars3d"
    ></script>

    <link href="../lib/jquery/select/jqSelect.css" rel="stylesheet" />
    <script src="../lib/jquery/select/jqSelect.js"></script>

    <link href="css/style.css" rel="stylesheet" />
    <style>
      .mp_table {
        width: 100%;
        border: #cde1de 1px solid;
        font-size: 12px;
        border-collapse: collapse;
        border-spacing: 0;
      }

      .mp_table tr td {
        padding: 5px 5px;
        text-align: left;
        border: #cde1de 1px solid;
      }

      .mp_table tr td:first-child {
        border-left: none;
      }

      .nametd {
        width: 40%;
      }

      .mp_input {
        height: 28px;
        line-height: 22px;
        padding: 3px 5px;
        box-sizing: border-box;
        font-size: 12px;
        border: 1px solid #e6e6e6;
        background-color: #fff;
        border-radius: 3px;
        display: block;
        width: 100%;
        outline: 0;
        box-sizing: border-box;
      }

      .mp_input:hover {
        border-color: #c9c9c9 !important;
      }

      .mp_input:focus {
        border-color: #3374e0 !important;
      }

      .mp_head2 {
        width: 100%;
        height: 45px;
        line-height: 45px;
        text-align: center;
      }

      .dark .progress {
        margin: 0;
        background-color: #0b2931;
      }
    </style>
  </head>

  <body class="dark">
    <!--加载前进行操作提示，优化用户体验-->
    <div id="mask" class="signmask" onclick="removeMask()"></div>

    <div id="mars3dContainer" class="mars3d-container"></div>

    <!-- 控制 面板 -->
    <div class="infoview">
      <input id="btnStart" type="button" class="btn btn-primary" value="开始" />
      <input id="btnPause" type="button" class="btn btn-primary" value="暂停" />
      <input id="btnStop" type="button" class="btn btn-primary" value="停止" />

      <table class="mp_table">
        <tr>
          <td class="nametd">漫游视角</td>
          <td>
            <select id="cameraType" class="mp_select" data-value="2">
              <option value="">自由视角</option>
              <option value="gs">跟随视角</option>
              <option value="dy">锁定第一视角</option>
              <option value="sd">锁定上帝视角</option>
            </select>
          </td>
        </tr>
        <tr id="tr_followedX" title="距离漫游对象的水平距离，单位：米">
          <td class="nametd">视角距离</td>
          <td>
            <input id="followedX" type="number" min="0" max="99999" value="1" class="mp_input" />
          </td>
        </tr>
        <tr id="tr_followedZ" title="距离漫游对象的高度，单位：米">
          <td class="nametd">视角高度</td>
          <td>
            <input id="followedZ" type="number" min="0" max="99999" value="0" class="mp_input" />
          </td>
        </tr>

        <tr id="tr_offsetZ" title="偏离漫游对象的高度，单位：米">
          <td class="nametd">高度偏移值</td>
          <td>
            <input id="offsetZ" type="number" min="-9999" max="9999" value="0" step="0.1" class="mp_input" />
          </td>
        </tr>
        <tr id="tr_offsetY" title="偏离漫游对象的横向值，单位：米">
          <td class="nametd">横向偏移值</td>
          <td>
            <input id="offsetY" type="number" min="-9999" max="9999" value="0" step="0.1" class="mp_input" />
          </td>
        </tr>
        <tr id="tr_offsetX" title="偏离漫游对象的前后值，单位：米">
          <td class="nametd">前后偏移值</td>
          <td>
            <input id="offsetX" type="number" min="-9999" max="9999" value="0" step="0.1" class="mp_input" />
          </td>
        </tr>

        <tr>
          <td class="nametd">模型角度</td>
          <td style="min-width: 130px">
            <div class="radio radio-info radio-inline">
              <input type="radio" id="jiaodu_1" value="1" name="jiaodu" checked />
              <label for="jiaodu_1">自动</label>
            </div>
            <div class="radio radio-info radio-inline">
              <input type="radio" id="jiaodu_2" value="2" name="jiaodu" />
              <label for="jiaodu_2">手动</label>
            </div>
          </td>
        </tr>
        <tr class="jiaodu_2_angele">
          <td class="nametd">heading值</td>
          <td>
            根据路线自动计算
            <!--<input id="model_heading" type="range" min="0" max="360" step="0.01" value="10" title="方向">-->
          </td>
        </tr>
        <tr class="jiaodu_2_angele">
          <td class="nametd">pitch值</td>
          <td>
            <input id="model_pitch" type="range" min="0" max="360" step="0.01" value="0" title="倾角pitch" />
          </td>
        </tr>
        <tr class="jiaodu_2_angele">
          <td class="nametd">roll值</td>
          <td>
            <input id="model_roll" type="range" min="0" max="360" step="0.01" value="0" title="滚动角roll" />
          </td>
        </tr>
      </table>
    </div>

    <!-- 信息 面板 -->
    <div class="infoview rightbottom" style="min-width: 200px">
      <table class="mp_table">
        <tr>
          <td class="nametd">总长度</td>
          <td id="td_alllength"></td>
        </tr>
        <tr>
          <td class="nametd">已漫游长度</td>
          <td id="td_length"></td>
        </tr>
        <tr>
          <td class="nametd">总时长</td>
          <td id="td_alltimes"></td>
        </tr>
        <tr>
          <td class="nametd">已漫游时间</td>
          <td id="td_times"></td>
        </tr>

        <tr>
          <td class="nametd">经度</td>
          <td id="td_jd"></td>
        </tr>
        <tr>
          <td class="nametd">经度</td>
          <td id="td_wd"></td>
        </tr>
        <tr>
          <td class="nametd">漫游高程</td>
          <td id="td_gd"></td>
        </tr>
        <tr>
          <td class="nametd">地面高程</td>
          <td id="td_dmhb"></td>
        </tr>
        <tr id="tr_ldgd">
          <td class="nametd">离地距离</td>
          <td id="td_ldgd"></td>
        </tr>

        <tr>
          <td colspan="2" style="width: 100%; text-align: center">
            <div class="progress">
              <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
            </div>
          </td>
        </tr>
      </table>
    </div>

    <script src="./js/common.js"></script>
    <script type="text/javascript">
      "use script"; //开发环境建议开启严格模式

      var map;
      var roamLine;

      function initMap(options) {
        //合并属性参数，可覆盖config.json中的对应配置
        var mapOptions = mars3d.Util.merge(options, {
          scene: {
            center: { lat: 30.859616, lng: 116.296235, alt: 445, heading: 258, pitch: -29 },
          },
          control: {
            animation: true, //是否创建动画小器件，左下角仪表
            timeline: true, //是否显示时间线控件
          },
        });

        //创建三维地球场景
        map = new mars3d.Map("mars3dContainer", mapOptions);

        //创建矢量数据图层
        var graphicLayer = new mars3d.layer.GraphicLayer();
        map.addLayer(graphicLayer);

        //该数据可以从 基础项目 飞行漫游功能界面操作后保存JSON
        var flydata = {
          name: "飞机航线",
          speed: 100,
          showStop: true,
          positions: [
            [116.295754, 30.859525, 418.5],
            [116.295699, 30.859754, 419.1],
            [116.295759, 30.860242, 422.2],
            [116.296109, 30.861108, 425.6],
            [116.296669, 30.862062, 428.8],
            [116.297105, 30.862978, 431.7],
            [116.297429, 30.863782, 432.2],
            [116.297829, 30.864648, 432.6],
            [116.298229, 30.865548, 432.7],
            [116.298639, 30.86646, 433.2],
            [116.299029, 30.867376, 433.8],
            [116.299369, 30.868276, 434.9],
            [116.299615, 30.869388, 438.5],
            [116.300039, 30.870338, 442.5],
            [116.300469, 30.871318, 445.5],
            [116.300904, 30.872262, 449.4],
            [116.301324, 30.873121, 454.2],
            [116.301599, 30.873975, 458.7],
            [116.301689, 30.875131, 463.9],
            [116.301579, 30.876368, 468.8],
            [116.301229, 30.877428, 473.7],
            [116.300774, 30.878442, 479.1],
            [116.300239, 30.879461, 486.1],
            [116.299729, 30.880532, 493.5],
            [116.299264, 30.881518, 500.9],
            [116.298709, 30.882543, 510],
            [116.284909, 30.885183, 1133.1],
            [116.283389, 30.884496, 1137.1],
            [116.282189, 30.883573, 1144.7],
            [116.281149, 30.882568, 1156.7],
            [116.280359, 30.881538, 1169.8],
            [116.279799, 30.880498, 1181.2],
            [116.279349, 30.879354, 1193.9],
            [116.279239, 30.878175, 1204.7],
            [116.279199, 30.877008, 1217.5],
            [116.278985, 30.875825, 1219.3],
            [116.278719, 30.874704, 1229.2],
            [116.278504, 30.873662, 1244],
            [116.278319, 30.872651, 1259.5],
            [116.278159, 30.871621, 1276.4],
            [116.278009, 30.870608, 1288.9],
            [116.277859, 30.869592, 1299.4],
            [116.277719, 30.868562, 1307.6],
            [116.277579, 30.867551, 1318.2],
            [116.277479, 30.866533, 1324.5],
            [116.277375, 30.865503, 1333.4],
            [116.277249, 30.864495, 1342.3],
            [116.277109, 30.863481, 1348.5],
            [116.276925, 30.862451, 1355.5],
            [116.276689, 30.861432, 1362.3],
            [116.276329, 30.860395, 1369.9],
            [116.275779, 30.859358, 1377.1],
            [116.274999, 30.858373, 1386.1],
            [116.274169, 30.857366, 1395.2],
            [116.273239, 30.856492, 1402.7],
            [116.272034, 30.855893, 1407.4],
            [116.270639, 30.855432, 1415.9],
            [116.269143, 30.855142, 1422.6],
            [116.267639, 30.85497, 1429.6],
            [116.266053, 30.855134, 1434.4],
            [116.264344, 30.855382, 1437.1],
            [116.262739, 30.855813, 1434.6],
            [116.261124, 30.856393, 1432.8],
            [116.259589, 30.856968, 1434.4],
            [116.258065, 30.857548, 1436.9],
            [116.258949, 30.864934, 1272.7],
            [116.259889, 30.865938, 1266.5],
            [116.260995, 30.866778, 1262],
            [116.262219, 30.867478, 1257.4],
            [116.263369, 30.868178, 1259.1],
            [116.264535, 30.868852, 1259.3],
            [116.265729, 30.86955, 1257.7],
            [116.266959, 30.870248, 1253.8],
            [116.268204, 30.870984, 1248.4],
            [116.269429, 30.871701, 1242.8],
            [116.270623, 30.872398, 1241.4],
            [116.271799, 30.873088, 1241.6],
            [116.272973, 30.873792, 1240.8],
            [116.274099, 30.874505, 1240.5],
            [116.275159, 30.875291, 1238.8],
            [116.276079, 30.876208, 1236.6],
            [116.276833, 30.877313, 1232.6],
            [116.277469, 30.878473, 1230.4],
            [116.278023, 30.879636, 1227.8],
            [116.278519, 30.880798, 1225.7],
            [116.279009, 30.881963, 1223.5],
            [116.279519, 30.883118, 1223.2],
            [116.280029, 30.884288, 1223.1],
            [116.280589, 30.885453, 1222.1],
            [116.281199, 30.886541, 1222.2],
            [116.281959, 30.887563, 1221.3],
            [116.282883, 30.88852, 1221.2],
            [116.283883, 30.889444, 1221.5],
            [116.284949, 30.89026, 1221.2],
          ],
          model: {
            show: true,
            url: "//data.mars3d.cn/gltf/mars/MQ-9-Predator.glb",
            scale: 1,
            minimumPixelSize: 100,
          },
          path: {
            show: true,
            color: "#ffff00",
            opacity: 0.5,
            width: 1,
            isAll: false,
          },
          shadow: [
            {
              show: true,
              type: "wall",
              surface: true,
            },
          ],
          camera: {
            type: "gs",
            heading: 30,
            radius: 500,
          },
          // "clockLoop": true,      //是否循环播放
          clockRange: Cesium.ClockRange.CLAMPED, //CLAMPED 到达终止时间后停止
        };

        roamLine = new mars3d.graphic.RoamLine(flydata);
        graphicLayer.addGraphic(roamLine);

        $("#btnStart").click(function () {
          //启动漫游
          if (roamLine.isStart) {
            roamLine.proceed(); //继续
          } else {
            roamLine.start();
          }
          $("#btnPause").show();
        });
        $("#btnPause").hide();
        $("#btnPause").click(function () {
          if (roamLine.isPause) {
            roamLine.proceed(); //继续
            $(this).val("暂停");
          } else {
            roamLine.pause(); //暂停
            $(this).val("继续");
          }
        });

        $("#btnStop").click(function () {
          roamLine.stop();
          $("#btnPause").hide();
        });

        initUI();

        if (map.viewer.timeline) {
          map.viewer.timeline.zoomTo(roamLine.startTime, roamLine.stopTime);
        }

        //显示基本信息，名称、总长、总时间
        showAllInfo({
          name: roamLine.name,
          alllen: roamLine.alllen,
          alltime: roamLine.alltimes,
        });

        roamLine.on(mars3d.EventType.change, (event) => {
          //面板显示相关信息
          showRealTimeInfo(event);
        });
      }

      function initUI() {
        $("#cameraType").attr("data-value", roamLine.options.camera.type);
        $("#followedX").val(roamLine.options.camera.followedX);
        $("#followedZ").val(roamLine.options.camera.followedZ);
        $("#offsetZ").val(roamLine.options.camera.offsetZ || 0);
        $("#offsetY").val(roamLine.options.camera.offsetY || 0);
        $("#offsetX").val(roamLine.options.camera.offsetX || 0);

        //改变视角模式
        $("#cameraType").select(); //绑定样式
        $("#cameraType").change(function () {
          $("#tr_followedX").hide();
          $("#tr_followedZ").hide();

          var attrVal = $(this).attr("data-value");
          switch (attrVal) {
            default:
              break;
            case "gs": //
              $("#tr_followedX").show();
              break;
            case "dy": //锁定第一视角
              $("#tr_followedX").show();
              $("#tr_followedZ").show();

              $("#followedX").val(200);
              $("#followedZ").val(50);
              $("#offsetZ").val(0);
              $("#offsetY").val(0);
              $("#offsetX").val(0);

              break;
            case "sd": //锁定上帝视角
              $("#tr_followedZ").show();

              var followedZ = Number($("#followedZ").val());
              if (followedZ < 500) {
                $("#followedZ").val(500);
              }
              break;
          }
          updateCameraSetting();
        });
        $("#cameraType").change();

        //第一视角
        $("#followedX").change(function () {
          updateCameraSetting();
        });
        $("#followedZ").change(function () {
          updateCameraSetting();
        });
        $("#offsetY").change(function () {
          updateCameraSetting();
        });
        $("#offsetZ").change(function () {
          updateCameraSetting();
        });
        $("#offsetX").change(function () {
          updateCameraSetting();
        });

        //模型方向
        $(".jiaodu_2_angele").hide();
        $('input:radio[name="jiaodu"]').change(function () {
          var isAuto = $(this).val() === "1";
          if (isAuto) {
            $(".jiaodu_2_angele").hide();
          } else {
            $(".jiaodu_2_angele").show();
          }

          updateModel(isAuto);
        });
        //滑动条
        $("#model_pitch").range({
          onChange: function (value, bfb) {
            updateModel();
          },
        });
        $("#model_roll").range({
          onChange: function (value, bfb) {
            updateModel();
          },
        });
      }

      function updateModel(isAuto) {
        var pitch = Number($("#model_pitch").val());
        var roll = Number($("#model_roll").val());

        roamLine.updateAngle(isAuto, {
          pitch: pitch,
          roll: roll,
        });
      }

      //改变视角模式
      function updateCameraSetting() {
        var cameraType = $("#cameraType").attr("data-value");
        var followedX = Number($("#followedX").val());
        var followedZ = Number($("#followedZ").val());
        var offsetZ = Number($("#offsetZ").val());
        var offsetY = Number($("#offsetY").val());
        var offsetX = Number($("#offsetX").val());

        roamLine.setCameraOptions({
          type: cameraType,
          radius: cameraType == "gs" ? followedX : 0,
          followedX: followedX,
          followedZ: followedZ,
          offsetZ: offsetZ,
          offsetY: offsetY,
          offsetX: offsetX,
        });
      }

      //显示基本信息，名称、总长、总时间
      var _alltime = 100;

      function showAllInfo(params) {
        _alltime = params.alltime;

        $("#td_alltimes").html(haoutil.str.formatTime(params.alltime));
        $("#td_alllength").html(haoutil.str.formatLength(params.alllen));
      }

      //显示实时坐标和时间
      function showRealTimeInfo(params) {
        if (params == null) {
          return;
        }

        var val = Math.ceil((params.time * 100) / _alltime);
        if (val < 1) {
          val = 1;
        }
        if (val > 100) {
          val = 100;
        }

        $(".progress-bar")
          .css("width", val + "%")
          .attr("aria-valuenow", val)
          .html(val + "%");

        $("#td_jd").html(params.lng);
        $("#td_wd").html(params.lat);
        $("#td_gd").html(haoutil.str.formatLength(params.alt));

        $("#td_times").html(haoutil.str.formatTime(params.time));
        $("#td_length").html(haoutil.str.formatLength(params.len));

        if (params.hbgd) {
          $("#td_dmhb").html(haoutil.str.formatLength(params.hbgd));
        } else {
          $("#td_dmhb").html("未知");
        }

        if (params.ldgd) {
          $("#td_ldgd").html(haoutil.str.formatLength(params.ldgd));
        } else {
          $("#td_ldgd").html("未知");
        }
      }
    </script>
  </body>
</html>
